<template>


<el-tabs type="border-card" @tab-remove="removeTab" :closable="true">
  <el-tab-pane :label="project.name">
    <el-container>
<!--      项目详情-->

      <el-main>
        <el-form ref="project" :model="project" label-width="80px">
          <!-- 执行单位部门 -->
          <el-row>
            <!--客户名称-->
            <el-col :span="8">
              <el-form-item label="客户名称">
                <el-select v-model="project.partner_id" placeholder="客户名称待分配" :disabled="!project.is_show"  @change="editProjectParenter" style="width:100%;">
                  <el-option :label="vo.name" :value="vo.id" v-for="(vo,k) in project.partners" :key="k"></el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <!-- 公司 -->
            <el-col :span="8">
                <el-form-item label="执行单位">
                 <el-input v-model="project.companyName" disabled placeholder="执行单位" style="width:100%;"></el-input>
              </el-form-item>
            </el-col>
            <!-- 部门 -->
            <el-col :span="8">
              <el-form-item label="执行部门">
                <el-input v-model="project.deptName" placeholder="执行部门" style="width:100%;" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 创建人联系方式 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label='项目名称'>
                <el-input v-model="project.name" placeholder="项目名称" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="项目负责">
                <el-input v-model="project.leader" placeholder="负责人" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目电话">
                <el-input v-model="project.leader_mobile" placeholder="联系方式" maxlength="11" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!--    客户负责人-->
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目编号">
                <el-input v-model="project.batch_id" placeholder="项目编号" :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="客户对接">
                <el-input v-model="project.customer" placeholder="负责人" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户电话">
                <el-input v-model="project.customer_mobile" placeholder="联系方式" maxlength="11" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <!--项目城市-->
              <el-form-item label="项目城市">
                <el-input v-model="project.city" placeholder="项目城市" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售经理">
                <el-input v-model="project.seller" placeholder="负责人" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售电话">
                <el-input v-model="project.seller_mobile" placeholder="联系方式" maxlength="11" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--客户报价,项目成本-->
          <el-row>

            <el-col :span="8">
              <!-- 币种选择 流程选择-->
              <el-form-item label="项目币种">
                <el-select v-model="project.currency" placeholder="项目币种" style="width:100%;" @change="changeMoneyCurrency" :disabled="project.disable">
                  <el-option v-for="(v,i) in currencys" :key="i" :label="v.currency" :value="v.currency" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="客户报价">
                <el-input
                  v-model="project.offer"
                  placeholder="客户报价"
                  @blur="$fmoney"
                  :disabled="project.disable"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目成本">
                <el-input v-model="project.cost" placeholder="项目成本" @blur="$fmoney" :disabled="project.disable"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <!-- 开始时间 结束时间 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="立项时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="project.created_at" style="width: 100%;" value-format="yyyy-MM-dd" :disabled="project.disable" :picker-options="pickerOptions"></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 开始时间 -->
            <el-col :span="8">
              <el-form-item label="开始时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="project.start" style="width: 100%;" value-format="yyyy-MM-dd" :disabled="project.disable" :picker-options="pickerOptionsStart"></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 结束时间 -->
            <el-col :span="8">
              <el-form-item label="结束时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="project.stop" style="width: 100%;" value-format="yyyy-MM-dd" :disabled="project.disable" :picker-options="pickerOptionsEnd"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <!--备注信息-->
          <el-form-item label="备注信息" prop="desc">
            <el-input
              type="textarea"
              v-model="project.desc"
              maxlength="1500"
              show-word-limit
              :disabled="project.disable"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="project.is_show_btn">
            <el-button type="primary" @click="onSubmit('project',0)">{{project.btn}}</el-button>

            <el-button type="primary" @click="onSubmit('project',1)">保存</el-button>

            <el-button @click="resetForm('project')">取消</el-button>
          </el-form-item>
        </el-form>

        <spForm :form="spform" v-if="project.hidden" ref="spForm"></spForm>
      </el-main>

      <el-footer>
        <history :history="project.history" :pid="project.id"  :type="spform.type"></history>
      </el-footer>
    </el-container>

  </el-tab-pane>

</el-tabs>

</template>

<script>
    import topNavbar from "../common/topNavbar";
    import {getProjectLxDetail,editProjectLx,editProjectPartnerID} from '@/apilist/Project'
    import {getCommonSelect,getCompanyDept} from '@/apilist/public'
    import {rules} from '@/rules/rules'
    import history from '../common/history'
    import spForm from "../common/spForm";
    import {mapState} from "vuex";

    export default {
        name: "project_edit_lx",
        data(){
            return {
                id: '',
                project:{},//项目数据
                oldData:{},
                title:'项目数据',
                path:'/project_list',
                isdisabled:true,
                depts:[''],
                companys:[],
                currencys:[],
                rules:rules,
                spform:{
                    note:'',//审批备注
                    newData:'',
                    type: 'lx',
                    is_show_upload: false,
                },
                companyName: '',

              pickerOptionsStart: {
                disabledDate: time => {
                  if (this.project.created_at) {
                    return  time.getTime() < new Date(this.project.created_at).getTime()  /*开始日期要在选择的结束日期之前*/
                  }
                  // return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
                  return time.getTime() > Date.now() - 8.64e6; /*今天及之前，注意数字不一样*/
                }
              },
              pickerOptionsEnd: {
                disabledDate: time => {
                  if (this.project.start) {
                    return  time.getTime() < new Date(this.project.start).getTime()  /*开始日期要在选择的结束日期之前*/;
                  }
                  return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
                }
              },
              isSubmit: true,
            }
        },
        components:{topNavbar,history,spForm},
        computed:{
          ...mapState("Common",["pickerOptions"])
        },
        methods: {
          async  onSubmit(formName,state) {
              if(!this.isSubmit) return false;
              this.isSubmit = false;
              try {
                //修改立项数据
                this.project.is_save = state
                if (this.project.hidden) this.project['spForm']['note'] = this.$refs.spForm.form.note;//保存审批日志
                 let res = await editProjectLx(this.project);
                 await this.$success(res.msg)
                 const detail = await  getProjectLxDetail({id: this.id})
                 this.project = detail.data
                 this.spform.newData = detail.data
                 this.isSubmit = true
              }catch (e) {
                console.log(e)
                 this.isSubmit = true;
                 Promise.reject(e)
              }

            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            },
            changeMoneyCurrency(){
                let that = this;
                that.project.offer = that.fun.fmoney(that.project.offer);
                that.project.cost = that.fun.fmoney(that.project.cost);
            },

            //修改项目合作商
            editProjectParenter(){
                editProjectPartnerID({id: this.project.id,partner_id: this.project.partner_id}).then(res => {
                    this.$message({type:'success',message: res.msg});
                })
            },
            removeTab(){
                this.$router.push({
                  path: this.path,
                  query: {
                    tab: 0,
                  },
                });
            }

        },


        mounted() {
            this.id = this.$route.query.id
            getProjectLxDetail({id:this.id}).then(res => {
                this.project = res.data
                this.spform.newData = res.data
                this.spform.note = res.data.spForm.note

            })

            getCommonSelect({type:['currency']}).then(res=>{
                this.currencys = res.data.currency
            });

        }
    }
</script>

<style scoped>
</style>
